<template>
	<view class="content">
		<view class="inputBox">
			<uni-forms ref="form" :modelValue="personnel" :rules="rules">
				<uni-forms-item label="用户名" name="user_name" required>
					<uni-easyinput type="text" v-model="personnel.userName" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex" required>
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value">
							<radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
						</label>
					</radio-group>
					<!-- <uni-easyinput type="text" v-model="personnel.sex" placeholder="请输入性别" /> -->
				</uni-forms-item>
				<uni-forms-item label="密码" name="pass_word" required>
					<uni-easyinput type="password" v-model="personnel.passWord" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone" required>
					<uni-easyinput type="text" v-model="personnel.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" name="id_card" required>
					<uni-easyinput type="text" v-model="personnel.idCard" placeholder="请输入身份证号" />
				</uni-forms-item>
				<uni-forms-item label="邮箱号" name="email" required>
					<uni-easyinput type="text" v-model="personnel.email" placeholder="请输入邮箱" />
					<!-- <u-button type="primary" class="button1" shape="circle" text="按钮形状" @click="yanzheng">获取验证码 -->
					
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
							@change="codeChange"></u-code>
							<u-button @tap="getCode" type="primary">{{tipss}}</u-button>
					
					
					</u-button>
				</uni-forms-item>
				<uni-forms-item label="验证码" name="graphicVerifyCode" required>
					<uni-easyinput type="text" v-model="personnel.graphicVerifyCode" placeholder="请输入验证码" />
				</uni-forms-item>

			</uni-forms>
			<view class="button-zhuce">
				<text @click="cz" style="margin-left: 10rpx;">重置</text>
				<text @click="onTapCell" style="margin-left: 50rpx;">返回</text>
			</view>
			<button type="primary" :loading="loading" class="button-login" @click="submitForm"
				hover-class="button-hover">提交</button>
			</form>
		</view>
	</view>
</template>
<script>
			import request from '../../request.js'
	export default {
		data() {
			return {
				tipss: '',
				seconds: 60,
				tips: {

					text: '请选择性别',

					color: '#909399',

					fontSize: 24

				},
				sex: [{
					label: "男",
					value: 0,
					checked: true
				}, {
					label: "女",
					value: 1
				}],

				isChecked: false,
				loading: false,
				tabList: [],
				token: '',
				name: '',
				hobby: '男',
				personnel: {
					//userId: uni.getStorageSync('loginData').user_id,
					userName: '',
					sex: 0,
					passWord: '',
					idCard: '',
					phone: '',
					email: '',
					graphicVerifyCode: '',
				},
				rules: {
					graphicVerifyCode: {
						rules: [{
								required: true,
								errorMessage: '请输入验证码',
							},
							{
								minLength: 3,
								maxLength: 6,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					email: {
						rules: [{
								required: true,
								errorMessage: '请输入email',
							}
						]
					},
					// 对name字段进行必填验证
					user_name: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名',
							},
							{
								minLength: 3,
								maxLength: 6,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					sex: {
						rules: [{
								required: true,
								errorMessage: '请输入性别',
							}
						]
					},
					pass_word: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 6,
								maxLength: 10,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^1[0-9]{10}$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					id_card: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证号',
								// validator: cardrule,
								trigger: ["blur", "change"]
							},
							{
								minLength: 18,
								maxLength: 18,
								errorMessage: '身份证长度在 {minLength}个字符',
							}, {
								validateFunction: function(rule, value, data, callback) {
									let iphoneReg = /^\d+$/
									if (!iphoneReg.test(value)) {
										callback('身份证号格式不正确，请重新填写')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		created() {},
		computed: {},
		//初始化路径
		onLoad(val) {
			this.statu = val.statu
		},
		methods: {
			codeChange(text) {
							this.tipss = text;
						},
						getCode() {
									if (this.personnel.email != null && this.personnel.email != "") {

										request({
											url: '/systemuser/user/getCheckCode/'+this.personnel.email,
											method: 'POST',
											dataType: 'json',
											success: (res) => {
												  if(res.data.code =='20000'){
												if(this.$refs.uCode.canGetCode) {
													// 模拟向后端请求验证码
													uni.showLoading({
														title: '正在获取验证码'
													})
													setTimeout(() => {
														uni.hideLoading();
														// 这里此提示会被this.start()方法中的提示覆盖
														uni.$u.toast('验证码已发送');
														// 通知验证码组件内部开始倒计时
														this.$refs.uCode.start();
													}, 2000);
												} else {
													uni.$u.toast('倒计时结束后再发送');
												}
												}

							
											},
										})
									} else {
										uni.showModal({
											content: '请输入邮箱!',
											showCancel: false
										});
									}
							

						},
						// end() {
						// 	uni.$u.toast('倒计时结束');
						// },
						// start() {
						// 	uni.$u.toast('发送成功');
						// },
					
			radioChange(e) {
				this.personnel.sex = this.radio = e.detail.value
				console.log(this.personnel.sex)
			},

			onTapCell() {
				uni.navigateTo({
					url: './login',
				})
			},
			fh() {
				uni.navigateTo({
					url: './login?statu=' + this.statu
				})
			},
			cz() {
				this.personnel = {}; //表单重置
			},

			submitForm() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					// 判断用户名重复
					request({
						url: '/systemuser/user/registerInfo',
						data: this.personnel,
						method: 'POST',
						success: (res) => {
							console.log(res)
							// if (res.data.message=='邮箱已存在') {
							// 	console.log(res.data)
							// 	uni.showToast({
							// 		title: '邮箱已存在',
							// 		icon: 'error'
							// 	})
							// } 
							if (res.data.code == 20000) {
								console.log(res.data)
								uni.showToast({
									title: '注册成功',
									icon: 'success'
								})
								/* 页面跳转 */
								setTimeout(() => {
									uni.navigateTo({
										url: './login'
									})
								}, 1000)
							} else {
								uni.showToast({
									title: '注册失败,邮箱已存在或者验证码失效',
									icon: 'error'
								})
							}
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>
<style>
	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(29, 139, 235, 1.0), rgba(21, 226, 141, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(235, 140, 45, 0.8), rgba(144, 185, 117, 0.8));
	}

	.button1 {

		width: 200rpx;
		height: 60rpx;
		font-size: 10rpx;
		background-color: #00C8DC;
	}

	.inputBox {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.button-zhuce {
		color: #ffa800;
		font-size: 34rpx;
		width: 200rpx;
		height: 10rpx;
		/* text-align: right; */
		margin-left: 230rpx;
		margin-top: 30rpx;
	}
</style>
